<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-model 结合复选按钮使用</title>
</head>
<body>
<div id="app">
    <h1>请选择你喜欢的水果</h1>
    <input type="checkbox" name="fruits" id="apple" value="苹果" v-model="results">
    <label for="apple">苹果</label>

    <input type="checkbox" name="fruits" id="orange" value="橘子" v-model="results">
    <label for="orange">橘子</label>

    <input type="checkbox" name="fruits" id="strawberry" value="草莓" v-model="results">
    <label for="strawberry">草莓</label>

    <input type="checkbox" name="fruits" id="banana" value="香蕉" v-model="results">
    <label for="banana">香蕉</label>

    <input type="checkbox" name="fruits" id="watermelon" value="西瓜" v-model="results">
    <label for="watermelon">西瓜</label>

    <div id="results">{{ results }}</div>
</div>

<script type="module">
    import {createApp, ref} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let results = ref([])
                return {results}
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>